<template>
  <view class="comment-container" :style="{height:bottomHeight+'px'}">
    <uni-easyinput
      v-model="value"
      type="textarea"
      placeholder="说点什么吧"
      class="inputBox"
    />
    <button class="btn" type="primary" size="mini" @click="onClickBtn">发表</button>
    
  </view>
</template>

<script>
  import { userArticleCommentAPI } from '../../apis/user';
  export default {
    name:"article-comment-commit",
    props:{
      articleId:{
        type:String,
        required:true
      }

    },
    data() {
      return {
        value:'',
        bottomHeight:null
      };
    },
    created(){
      uni.onKeyboardHeightChange(({height})=>{
        this.bottomHeight = height
      })
    },
    methods:{
      async onClickBtn(){
        uni.showLoading({
          title:'加载中',
        })
        const {data:res} = await userArticleCommentAPI({
          articleId:this.articleId,
          content:this.value
        })

        // console.log(res);
        uni.showToast({
          title: '评论发表成功',
          icon: 'success',
          mask: true
        })
        this.$emit('commentSuccess',res)
      }
    }
  }
</script>

<style lang="scss" scoped>
.comment-container{
  padding: 12px;
  background-color: #d7d7d7;
  position: relative;
}

</style>